<template>
  <div>
    <div :style="{height: toolbarHei +'px'}"></div>
    <nut-navbar title="销售统计" left-text="返回" left-show @click-back="clickLeft"></nut-navbar>

    <div style="display: flex;background-color: white;height: 35px;padding:5px;">
      <div style="flex:1;margin-right: 5px;">
        <nut-input clearable placeholder="客户或商品关键字" v-model="searchModel.keyWord" @keydown.enter="quickSearch" />
      </div>
      <nut-button @click="quickSearch" size="small" text>搜索</nut-button>
      <nut-button style="margin-left: 5px;" @click="openAdvFilter" size="small" text>筛选</nut-button>
    </div>
    <div style="background-color: white;">
      <div style="display: flex;" class="top">
        <div style="flex: 1;text-align: center;">
          <div class="title">销售额</div>
          <div class="mt5 num">￥{{ state.amount }}</div>
        </div>
        <div style="flex: 1;text-align: center;">
          <div class="title">订单数</div>
          <div class="mt5 num">{{state.orders}}</div>
        </div>
        <div style="flex: 1;text-align: center;">
          <div class="title">客户数</div>
          <div class="mt5 num">{{state.customers}}</div>
        </div>
      </div>
    </div>
    <div style="padding: 5px;" >
      <div style="margin-top: 5px;">
        <nut-radio-group v-model="searchModel.gpType" direction="horizontal" @change="changeGp">
          <nut-radio label="商品汇总">商品汇总</nut-radio>
          <nut-radio label="客户汇总">客户汇总</nut-radio>
        </nut-radio-group>
      </div>
      <div style="height: 5px;" />
      <div style="padding: 5px;height: calc(100vh - 220px);overflow: auto;" >
        <fresh-load @action="action" url="app/getSaleGp" :search-model="searchModel" ref="freshRef" @getList="getLists">
          <template v-if="searchModel.gpType==='商品汇总'">
            <div v-for="(item,index) in state.list" :key="index" class="item" @click="todetail(item)">
              <div style="flex: 1;" class="name">{{item.name}}</div>
              <div>
                <div class="amount">￥{{item.amount}}</div>
                <div class="name" style="text-align: right;">{{ item.qty }}</div>
              </div>
            </div>
          </template>
          <template v-if="searchModel.gpType==='客户汇总'">
            <div v-for="(item,index) in state.list" :key="index" class="item" @click="todetail(item)">
              <div style="flex: 1;" class="name">{{item.name}}</div>
              <div>
                <div class="amount">￥{{item.amount}}</div>
              </div>
            </div>
          </template>
        </fresh-load>
      </div>
    </div>
    <advFilter ref="filterRef" @doSearch="doAdvSearch" />
    <nut-dialog v-model:visible="state.showDetail">
      <div class="detail" v-for="(item,index) in state.listDetail" :key="index">
        <div style="display: flex;font-size: 14px;">
          <div style="flex:1;">
            {{item.buName}}
          </div>
          <div style="margin-right: 10px;">{{item.billDate}}</div>
          <div>{{item.billNo}}</div>
        </div>
        <div style="display: flex;margin-top: 5px;">
          <div style="flex:1;">{{item.invName}}</div>
          <div style="width: 70px;text-align: right;">{{item.qty}}{{item.unit}}</div>
          <div style="margin-left: 20px;width: 60px;text-align: right;">
            ￥{{item.amount}}
          </div>
        </div>
      </div>
    </nut-dialog>
  </div>
</template>
<script setup>
// 零售
import tool from "@/utils/tool";
import {useGlobal} from "@/stores/useGlobal";
import advFilter from "./xsadvfilter.vue";
import FreshLoad from "@/components/freshLoad.vue";
import {computed, ref} from "vue";
import {useRouter} from "vue-router";
const global = useGlobal()
const router = useRouter()
const searchModel = ref({
  searchType: 'quick',
  keyWord: '',
  gpType: '商品汇总',
  beginDate: tool.getDay(),
  endDate: tool.getDay(),
})
const freshRef = ref(null)
const filterRef = ref(null)
const state = ref({
  active: 0,
  amount: '0.00',
  orders: 0,
  customers: 0,
  showDetail: false,
  list: [],
  listDetail: []
})
const getLists = (data) => {
  state.value.amount = data.amount
  state.value.orders = data.orders
  state.value.customers = data.customers
}
const hei = computed(() => {
  return window.innerHeight - 260
})
const toolbarHei = computed(() => {
  return global.statusBarHeight
})

const clickLeft = () => {
  router.go(-1)
}
// 弹出搜索
const openAdvFilter = () => {
  filterRef.value.open()
}
// 高级搜索
const doAdvSearch = (model) => {
  searchModel.value.searchType = 'adv'
  searchModel.value = Object.assign(searchModel.value, model)
  getList()
}
// 快速搜索
const quickSearch = () => {
  state.value.list = []
  searchModel.value.beginDate = tool.getDay()
  searchModel.value.endDate = tool.getDay()
  searchModel.value.currentPage = 1
  searchModel.value.searchType = 'quick'
  getList()
}
// 选择汇总方式
const changeGp = () => {
  getList()
}
const more = () => {}
const action = (arr) => {
  state.value.list = arr
}
const getList = () => {
  freshRef.value.getList()
}
const todetail = (item) => {
  let mod = Object.assign(searchModel.value,{name: item.name})
  state.value.listDetail = []
  tool.post('app/getSaleGpDetail', mod).then(ret => {
    state.value.listDetail = ret.data
    state.value.showDetail = true
  })
}



</script>

<style scoped lang="scss">
.detail {
  border-bottom: 1px solid rgba(0,0,0,0.1);
  margin-bottom: 5px;
  padding-bottom: 5px;
}
.item {
  background-color: white;
  padding: 10px;
  display: flex;
  border-bottom: 1px solid rgba(0,0,0,0.03);
  &:active {
    background-color: rgba(0,0,0,0.06);
  }
  .name {
    font-size: 14px;
    color: #6b6d71;
  }
  .amount {
    font-size: 14px;
    color: #1e9fff;
  }
}
.draft {
  color: #0bc15f !important;
}
.accounted {
  color: #1e9fff !important;
}
.top {
  .title {
    font-weight: bold;
    font-size: 14px;
    color: #8a8f97;
  }
  .num {
    font-weight: bold;
    font-size: 15px;
    color: #1e9fff;
  }
}

</style>